<link rel="stylesheet" type="text/css" href="__CSS__/base.css" media="all">
<link rel="stylesheet" type="text/css" href="__CSS__/common.css" media="all">
<link rel="stylesheet" type="text/css" href="__CSS__/module.css">
<link rel="stylesheet" type="text/css" href="__CSS__/{$Think.config.COLOR_STYLE}.css" media="all">
<link rel="stylesheet" type="text/css" href="__CSS__/main.css" media="all">

<style type="text/css">
    label {
        font-size: 1.2em;
    }
</style>
<div style="padding: 16px">

    <div style="overflow: auto; display: flex; justify-content: flex-start;flex-wrap: wrap;">
        <foreach name="rights" item="item">
            <label style="padding: 8px">
                <input <if condition="in_array($item['id'], $checked)">checked</if> class="rights" type="checkbox" value="{$item.id}"> {$item.name}
            </label>
        </foreach>
    </div>

    <div style="position: fixed;width: 100%; height: 60px; bottom: 0;left: 0;display: flex; align-items: center; justify-content: center; background-color: white">
        <button id="ok" class="btn bg-orange">确定</button>
        <label style="margin-left: 16px"><input type="checkbox" id="toggle-all"> 全选</label>
    </div>
</div>

<!--[if lt IE 9]>
<script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
<![endif]--><!--[if gte IE 9]><!-->
<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<!--<![endif]-->

<script>
    $(function () {
        $('#toggle-all').change(function () {
            var checked =  $(this).prop('checked');
            $('.rights').each(function () {
                $(this).prop('checked', checked)
            })
        })

        $('.rights').change(function () {
            $('#toggle-all').prop('checked', $('.rights:not(:checked)').length === 0)
        }).change()

        $('#ok').click(function () {
            var rights = [];
            $('.rights:checked').each(function () {
                rights.push($(this).val())
            })

            var group_id = "{:I('group_id')}"

            $.post("{:U('right')}", {rights: rights, group_id: group_id}, function () {
                window.parent._post_right()
            })
        })
    })

</script>